<template>
    <div>
        <!--            账号密码-->
        <div class="account">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>
        <!--            注册忘记密码-->
        <div class="bot">
            <div class="login" @click="toRes">
                注册
            </div>
            <div class="forgotPassword" @click="toFor">忘记密码？</div>
        </div>
    </div>

</template>

<script>
    import {loginIn} from '../api/api'
    import {Toast} from "vant";
    export default {
        name: "Login1",
        data(){
          return{
              password:"",
              username:""
            }
        },
        methods: {
            onSubmit(values) {
                console.log(values.密码)
                loginIn(values.用户名,values.密码).then(res=>{
                   if(res.code==0){
                       Toast(res.msg);
                       // console.log(res);
                       this.$store.commit("changIsLoginState",{isLogin:true,userInfo:res.data});
                   }
                       this.$router.push('/myapp/user');
                })
            },
            toRes(){
                this.$router.push('/login/Registered')
            } ,
            toFor(){
                this.$router.push('/login/ForgetPassword')
            },
            // login(){
            //     // console.log(value.用户名)
            //
            //     loginIn(this.username,this.password).then(res=>{
            //         console.log(22)
            //         console.log(res)
            //         // this.username=res.
            //     })
            // }
        },
    }
</script>

<style scoped>
    .account{
        margin-top: 20px;
    }
    .bot{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .bot>.login,
    .bot>.forgotPassword{
        /*margin-left: 20px;*/
        width: 22%;
        height: 40px;
        font-size: 13px;
        color: blue;
        border: 1px solid blue;
        outline: none;
        text-align: center;
        line-height: 40px;
        border-radius: 15px;
    }
</style>